<!--
 * @Description: 实时监测
 * @Author: charles
 * @Date: 2021-12-06 17:09:59
 * @LastEditors: charles
 * @LastEditTime: 2022-01-04 07:18:17
-->
<template>
  <div class="real_time">
    <div class="pro_dev">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
      <el-tree :data="proDevTree"
        ref="tree"
        :filter-node-method="filterNode"
        :props="{children: 'children', label: 'name'}" @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="chart_container">
      <el-tabs v-model="params.indicator" >
        <el-tab-pane label="tsp" name="tsp"></el-tab-pane>
        <el-tab-pane label="pm10" name="pm10"></el-tab-pane>
        <el-tab-pane label="pm2.5" name="pm25"></el-tab-pane>
        <el-tab-pane label="温度" name="temperature"></el-tab-pane>
        <el-tab-pane label="湿度" name="humidity"></el-tab-pane>
      </el-tabs>
      <div class="chart">
        <RealTimeLine 
          v-show="params.device_id"
          :key="JSON.stringify(chart_data)"
          :params="params"
          :data="chart_data">
        </RealTimeLine>
        <div class="info" v-show="!params.device_id"> 请选择设备进行查看</div>
      </div>
    </div>
    
  </div>
</template>
<script>
import RealTimeLine from './components/RealTimeLine.vue'
import {get} from '@/utils/request'
import moment from 'moment'
export default {
  components:{
    RealTimeLine
  },
  data(){
    return {
      filterText:"",
      proDevTree:[],
      monitors:[],
      params:{
        page:1,
        pageSize:100,
        indicator:'tsp',
        device_id:0,
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    params:{
      handler(){
        this.loadMonitor()
      },
      deep:true
    }
  },
  computed:{
    chart_data (){
      return this.monitors.map(item => {
        return {
          [this.params.indicator]:+item[this.params.indicator],
          time:moment(item.insert_time).format('hh:mm') ,
          id:item.id
        }
      });
    }
  },
  mounted(){
    this.loadProDevTree();
  },
  methods:{
    // 加载监测数据
    loadMonitor(){
      let url = "/monitor/pageQueryTodayData"
      get(url,this.params).then(resp => {
        this.monitors = resp.data.list;
      })
    },
    // 加载工程设备
    loadProDevTree(){
      let url = "/engineer/findEngineerDeviceTree"
      get(url).then(resp => {
        this.proDevTree =  resp.data;
      })
    },
    // 过滤节点
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 点击节点
    handleNodeClick(node){
      if(!node.children){
        this.params.device_id = node.id
        this.params.engineer_id = node.engineer_id
      }
    }
  }
}
</script>
<style>
  
</style>
<style lang="scss" scoped>
.real_time {
  position: absolute;
  width: 100%;
  top: .5em;
  bottom: .5em;
  display: flex;
  .pro_dev {
    flex-basis: 180px;
    padding-right: .5em;
    border-right: 1px solid #dfe4ed;
  }
  .chart_container {
    flex: 1;
    padding: 0 1em;
  }

  .info {
    padding: 3em 0;
    text-align: center;
    color: red;
  }
}
</style>